import React from 'react';
import { useState, useEffect, useRef } from 'react';
import {
  Cascader,
  Spin,
  Layout,
  Button,
  Collapse,
  Row,
  Col,
  Form,
  Input,
  Select,
  DatePicker,
  message,
  TimePicker,
  Modal,
  Table,
  Image,
  Upload,
} from 'antd';
import { SettingOutlined, UploadOutlined } from '@ant-design/icons';
import { UserAuth } from '../../utils/hooks';
import NotAuth from '../../components/NotAuth';
import axios from 'axios';
import Config from '../../Config';
import 'moment/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';
import { useSelector } from 'react-redux';
import { selectUser } from '../../redux/Slice/userSlice';
import * as moment from 'moment';
import Client from '../../utils/ossClient';
const { Header, Content } = Layout;
const { Panel } = Collapse;
const { Option } = Select;
const { TextArea } = Input;
const genExtra = () => (
  <SettingOutlined
    onClick={event => {
      event.stopPropagation();
    }}
  />
);
const panelHeader = text => (
  <div
    style={{
      fontWeight: 'bold',
      fontSize: '16px',
    }}
  >
    {text}
  </div>
);
const labelText = text => {
  return (
    <div
      style={{
        backgroundColor: '#FAFAFA',
        width: '120px',
        height: '31.6px',
        lineHeight: '31.6px',
        fontWeight: 'bold',
        fontSize: '15px',
        borderRadius: '3px',
        paddingRight: '5px',
      }}
    >
      {text}
    </div>
  );
};
const Register = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [fieldNameMap, setFieldNameMap] = useState(new Map());
  const [departmentList, SetdepartmentList] = useState([]);
  const [placeList, SetplaceList] = useState([]);
  const [userList, SetUserList] = useState([]);
  const [form] = Form.useForm();
  const [isSavedDataModalVisible, SetisSavedDataModalVisible] = useState(false);
  const [registerButton, SetRegister] = useState(false);
  const [savedData, SetSavedData] = useState([]);
  const [imgUrl, SetImgUrl] = useState('');
  const imgRef = useRef();
  const modelRef = useRef();
  const [imgFile, SetImgFile] = useState(null);
  const [modelFile, SetModelFile] = useState(null);

  const [JFKMOpt, SetJFKMOpt] = useState([]);
  const [XZOpt, SetXZOpt] = useState([]);
  const [XKLYOpt, SetXKLYOpt] = useState([]);
  const [SYFXOpt, SetSYFXOpt] = useState([]);
  const [GXMSOpt, SetGXMSOpt] = useState([]);
  let username = useSelector(selectUser);
  let umap = new Map();
  let umap2 = new Map();
  const dfs2 = (node, data) => {
    let index = umap2.get(node.value);
    if (data[index].placeType === 1) return;

    let children = StringToArray(data[index].placeChildren);
    if (children.length == 0) return;
    node.children = [];
    for (let i = 0; i < children.length; i++) {
      let temp = {
        value: data[umap2.get(children[i])].placeId,
        label: data[umap2.get(children[i])].placeName,
      };
      node.children.push(temp);
      dfs2(temp, data);
    }
  };
  const placeTrans = data => {
    let root = [];
    for (let i = 0; i < data.length; i++) {
      umap2.set(data[i].placeId, i);
      if (data[i].placeParent == -1) root.push(i);
    }
    let ans = [];
    for (let k = 0; k < root.length; k++) {
      let res = {};
      res.value = data[root[k]].placeId;
      res.label = data[root[k]].placeName;
      let children = StringToArray(data[root[k]].placeChildren);
      res.children = [];
      for (let i = 0; i < children.length; i++) {
        let temp = {
          value: data[umap2.get(children[i])].placeId,
          label: data[umap2.get(children[i])].placeName,
        };
        res.children.push(temp);
        dfs2(temp, data);
      }
      ans.push(res);
    }
    return ans;
  };
  const StringToArray = str => {
    let arr = str.trim().split(/\s+/);
    if (arr == '') return [];
    return arr.map(val => {
      return parseInt(val);
    });
  };
  const dfs = (node, data) => {
    let index = umap.get(node.value);
    if (data[index].departmentType === 1) return;

    let children = StringToArray(data[index].departmentChildren);
    if (children.length == 0) return;
    node.children = [];
    for (let i = 0; i < children.length; i++) {
      let temp = {
        value: data[umap.get(children[i])].departmentId,
        label: data[umap.get(children[i])].departmentName,
      };
      node.children.push(temp);
      dfs(temp, data);
    }
  };
  const departmentTrans = data => {
    let root = [];
    for (let i = 0; i < data.length; i++) {
      umap.set(data[i].departmentId, i);
      if (data[i].departmentParent == -1) root.push(i);
    }
    let ans = [];
    for (let k = 0; k < root.length; k++) {
      let res = {};
      res.value = data[root[k]].departmentId;
      res.label = data[root[k]].departmentName;
      let children = StringToArray(data[root[k]].departmentChildren);
      res.children = [];
      for (let i = 0; i < children.length; i++) {
        let temp = {
          value: data[umap.get(children[i])].departmentId,
          label: data[umap.get(children[i])].departmentName,
        };
        res.children.push(temp);
        dfs(temp, data);
      }
      ans.push(res);
    }
    return ans;
  };

  useEffect(() => {
    axios
      .all([
        axios.get(Config.baseURL + '/instrument/fieldname').catch(err => {
          message.error('服务器出错', 2);
        }),
        axios.get(Config.baseURL + '/user/department').catch(error => {
          console.log(error);
          message.error('获取部门列表出错，请联系后台', 2);
        }),
        axios.get(Config.baseURL + '/place/allplace').catch(error => {
          console.log(error);
          message.error('获取存放地列表出错，请联系后台', 2);
        }),
        axios.get(Config.baseURL + '/user/alluser').catch(error => {
          console.log(error);
          message.error('获取管理人列表出错，请联系后台', 2);
        }),
        axios.get(Config.baseURL + '/dict/getInstrumentDict').catch(error => {
          console.log(error);
          message.error('获取字典列表出错，请联系后台', 2);
        }),
      ])
      .then(
        axios.spread((fieldName, department, place, user, dict) => {
          let res = department.data;
          if (res.code === 1) {
            let data = departmentTrans(res.data);
            SetdepartmentList(data);
          } else if (res.code >= 10000) {
            message.error('获取部门列表出错，请联系后台', 1);
          }
          let res3 = place.data;
          if (res3.code === 1) {
            console.log(res3.data);
            let data = placeTrans(res3.data);
            SetplaceList(data);
          } else if (res3.code >= 10000) {
            message.error('获取存放地列表出错，请联系后台', 2);
          }
          let res4 = user.data;
          if (res4.code === 1) {
            SetUserList(res4.data);
          } else if (res4.code >= 10000) {
            message.error('获取管理人列表出错，错误信息： ' + res.message, 2);
          }
          let fieldMap = new Map();
          for (let i = 0; i < fieldName.data.data.length; i++)
            fieldMap.set(fieldName.data.data[i].fieldName, fieldName.data.data[i].cnName);
          setFieldNameMap(fieldMap);

          let res5 = dict.data;
          if (res5.code === 1) {
            let data = res5.data;
            console.log(data);
            let arr1 = [];
            for (let val in data[0]) {
              arr1.push({
                label: data[0][val],
                value: val,
              });
            }
            let arr2 = [];
            for (let val in data[1]) {
              arr2.push({
                label: data[1][val],
                value: val,
              });
            }
            let arr3 = [];
            for (let val in data[2]) {
              arr3.push({
                label: data[2][val],
                value: val,
              });
            }
            let arr4 = [];
            for (let val in data[3]) {
              arr4.push({
                label: data[3][val],
                value: val,
              });
            }
            let arr5 = [];
            for (let val in data[4]) {
              arr5.push({
                label: data[4][val],
                value: val,
              });
            }

            SetJFKMOpt(arr1);
            SetXZOpt(arr2);
            SetSYFXOpt(arr3);
            SetXKLYOpt(arr4);
            SetGXMSOpt(arr5);
          } else if (res5.code >= 10000) {
            message.error('获取管理人列表出错，错误信息： ' + res.message, 2);
          }

          setIsLoading(false);
        })
      );
  }, []);
  const InstrumentSubmit = async () => {
    SetRegister(true);
    try {
      let client = Client();
      let val = await form.validateFields();
      let url = 'instrumentImg/' + new Date().getTime() + username + '.png';
      if (imgFile != null) {
        const result = await client.put(url, imgFile);
        console.log(result);
        if (result.res.status != 200) {
          message.error('图片上传错误', 2);
          throw new Error(result);
        }
        val.imgUrl = result.res.requestUrls[0];
      }
      let fileName = new Date().getTime() + '_' + username;
      let url1 = 'model/' + fileName + '.json';
      if (modelFile != null) {
        const result = await client.put(url1, modelFile);
        console.log(result);
        if (result.res.status != 200) {
          message.error('图片上传错误', 2);
          throw new Error(result);
        }
        val.modelUrl = fileName;
      }

      val.GZRQ = val.GZRQ.format('YYYY-MM-DD');
      val.HGJGJZQ = val.HGJGJZQ.format('YYYY-MM-DD');
      val.BGRQ = val.BGRQ.format('YYYY-MM-DD');
      console.log(val);
      val.KFKSSJ = val.KFSJ[0].format('HH:mm');
      val.KFJSSJ = val.KFSJ[1].format('HH:mm');
      delete val.KFSJ;
      let deStr = '';
      let plStr = '';
      for (let i = 0; i < val.departmentId.length; i++) deStr += val.departmentId[i] + ' ';
      for (let i = 0; i < val.placeId.length; i++) plStr += val.placeId[i] + ' ';
      val.departmentId = deStr;
      val.placeId = plStr;
      for (let i in val) {
        if (val[i] == undefined) val[i] = '';
      }
      val.registerName = username;
      val.registerTime = moment().format('YYYY-MM-DD HH:mm:ss');
      console.log(val);
      axios
        .post(Config.baseURL + '/instrument/register', val)
        .then(res => {
          if (res.data.code == 1) {
            message.success('申请录入成功', 2, () => {
              SetRegister(false);
            });
          } else if (res.data.code >= 10000) {
            message.error('申请录入失败，原因：' + res.data.message, 2, () => {
              SetRegister(false);
            });
          }
        })
        .catch(err => {
          message.error('申请录入失败，原因：' + err, 2, () => {
            SetRegister(false);
          });
        });
    } catch (errInfo) {
      console.log(errInfo);
      message.error('数据不符合格式', 2);
      SetRegister(false);
    }
  };
  const dataSave = () => {
    let data = localStorage.getItem('savedData');
    if (data == null) {
      let data = [];
      let val = form.getFieldValue();
      val.savedTime = moment().format('YYYY-MM-DD HH:mm:ss');
      data.push(val);
      localStorage.setItem('savedData', JSON.stringify(data));
    } else {
      data = JSON.parse(data);
      let val = form.getFieldValue();
      val.savedTime = moment().format('YYYY-MM-DD HH:mm:ss');
      data.push(val);
      localStorage.setItem('savedData', JSON.stringify(data));
    }
    message.success('数据保存成功！', 1);
  };
  const GetSavedData = () => {
    let data = localStorage.getItem('savedData');
    data = JSON.parse(data);
    SetSavedData(data);
    SetisSavedDataModalVisible(true);
  };
  const readData = val => {
    return () => {
      delete val.savedTime;
      form.resetFields();
      if (val.BGRQ != undefined) val.BGRQ = moment(val.BGRQ);
      if (val.GZRQ != undefined) val.GZRQ = moment(val.GZRQ);
      if (val.HGJGJZQ != undefined) val.HGJGJZQ = moment(val.HGJGJZQ);
      if (val.KFSJ != undefined) {
        val.KFSJ[0] = moment(val.KFSJ[0]);
        val.KFSJ[1] = moment(val.KFSJ[1]);
      }

      form.setFieldsValue(val);
      SetisSavedDataModalVisible(false);
    };
  };
  const savedDataColumns = [
    {
      title: '存储时间',
      dataIndex: 'savedTime',
      key: 'savedTime',
    },
    {
      title: '读取',
      dataIndex: 'read',
      render: (_, record) => {
        return (
          <Button type="primary" size={'large'} onClick={readData(record)}>
            读取
          </Button>
        );
      },
    },
  ];
  const test = file => {
    let reader = new FileReader();
    reader.readAsDataURL(file.file); //发起异步请求
    reader.onload = function () {
      SetImgUrl(this.result);
    };
    SetImgFile(file.file);
    return false;
  };
  const props = {
    name: 'file',
    multiple: false,
    headers: {
      authorization: 'authorization-text',
    },
    onChange: test,
    maxCount: 1,
    beforeUpload(fiel, fileList) {
      console.log(fiel);
      console.log(fileList);
      return false;
    },
  };
  const test1 = file => {
    console.log(file.file);
    SetModelFile(file.file);
    return false;
  };
  const props1 = {
    name: 'file',
    multiple: false,
    headers: {
      authorization: 'authorization-text',
    },
    onChange: test1,
    maxCount: 1,
    beforeUpload(fiel, fileList) {
      return false;
    },
  };
  return (
    <Layout>
      <Header style={{ margin: '0px 0px', backgroundColor: 'white' }}>
        <Row>
          <Col span={6}></Col>
          <Col span={12}>
            <Button type="primary" onClick={dataSave} size={'large'}>
              保存数据
            </Button>
            <Button type="primary" size={'large'} style={{ margin: '0px 10px' }}>
              历史数据提取
            </Button>
            <Button onClick={GetSavedData} type="primary" size={'large'}>
              暂存提取
            </Button>
          </Col>
          <Col span={6}>
            <Button
              loading={registerButton}
              onClick={InstrumentSubmit}
              type="primary"
              size={'large'}
            >
              提交
            </Button>
          </Col>
        </Row>
      </Header>
      <Content>
        <Collapse defaultActiveKey={['1', '2']} expandIconPosition={'right'}>
          <Panel header={panelHeader('基本信息')} key="1" extra={genExtra()}>
            <Spin spinning={isLoading}>
              <Form form={form}>
                <Row gutter={[16, 5]}>
                  <Col className="gutter-row" span={8}>
                    <Form.Item
                      name="YQMC"
                      label={labelText(fieldNameMap.get('YQMC'))}
                      rules={[{ required: true, message: '需填写' + fieldNameMap.get('YQMC') }]}
                    >
                      <Input placeholder="" />
                    </Form.Item>
                  </Col>
                  <Col className="gutter-row" span={8}>
                    <Form.Item
                      name="departmentId"
                      label={labelText(fieldNameMap.get('departmentId'))}
                      rules={[
                        { required: true, message: '需填写' + fieldNameMap.get('departmentId') },
                      ]}
                    >
                      <Cascader changeOnSelect options={departmentList}></Cascader>
                    </Form.Item>
                  </Col>
                  <Col className="gutter-row" span={8}>
                    <Form.Item
                      name="placeId"
                      label={labelText(fieldNameMap.get('placeId'))}
                      rules={[{ required: true, message: '需填写' + fieldNameMap.get('placeId') }]}
                    >
                      <Cascader options={placeList}></Cascader>
                    </Form.Item>
                  </Col>
                  <Col className="gutter-row" span={8}>
                    <Form.Item
                      name="LC"
                      label={labelText(fieldNameMap.get('LC'))}
                      rules={[{ required: true, message: '需填写' + fieldNameMap.get('LC') }]}
                    >
                      <Input placeholder="请填写楼层，如第一层" />
                    </Form.Item>
                  </Col>
                  <Col className="gutter-row" span={8}>
                    <Form.Item
                      name="FJM"
                      label={labelText(fieldNameMap.get('FJM'))}
                      rules={[{ required: true, message: '需填写' + fieldNameMap.get('FJM') }]}
                    >
                      <Input placeholder="" />
                    </Form.Item>
                  </Col>
                  <Col className="gutter-row" span={8}>
                    <Form.Item
                      name="SL"
                      label={labelText(fieldNameMap.get('SL'))}
                      rules={[{ required: true, message: '需填写' + fieldNameMap.get('SL') }]}
                    >
                      <Input type={'number'} placeholder="" />
                    </Form.Item>
                  </Col>
                  <Col className="gutter-row" span={8}>
                    <Form.Item
                      name="JE"
                      label={labelText(fieldNameMap.get('JE'))}
                      rules={[{ required: true, message: '需填写' + fieldNameMap.get('JE') }]}
                    >
                      <Input type={'number'} placeholder="" />
                    </Form.Item>
                  </Col>
                  <Col className="gutter-row" span={8}>
                    <Form.Item
                      name="GZRQ"
                      label={labelText(fieldNameMap.get('GZRQ'))}
                      rules={[{ required: true, message: '需填写' + fieldNameMap.get('GZRQ') }]}
                    >
                      <DatePicker locale={locale} style={{ width: 257 }} size={'default'} />
                    </Form.Item>
                  </Col>
                  <Col className="gutter-row" span={8}>
                    <Form.Item
                      name="KFSJ"
                      label={labelText(fieldNameMap.get('KFSJ'))}
                      rules={[{ required: true, message: '需填写' + fieldNameMap.get('KFSJ') }]}
                    >
                      <TimePicker.RangePicker locale={locale} format={'HH:mm'} />
                    </Form.Item>
                  </Col>
                  <Col className="gutter-row" span={8}>
                    <Form.Item
                      name="JFKM"
                      label={labelText(fieldNameMap.get('JFKM'))}
                      rules={[{ required: true, message: '需填写' + fieldNameMap.get('JFKM') }]}
                    >
                      <Select options={JFKMOpt}>
                        {/* <Option value={'1'}>教学</Option>
                        <Option value={'2'}>科研</Option>
                        <Option value={'3'}>基建</Option>
                        <Option value={'4'}>自筹经费</Option>
                        <Option value={'5'}>世界银行贷款</Option>
                        <Option value={'6'}>捐赠</Option>
                        <Option value={'9'}>其他</Option>
                        <Option value={'A'}>研究生</Option>
                        <Option value={'B'}>贷款配套费</Option>
                        <Option value={'C'}>行政事业费</Option>
                        <Option value={'D'}>211经费</Option>
                        <Option value={'E'}>十五投资</Option>
                        <Option value={'F'}>985经费</Option> */}
                      </Select>
                    </Form.Item>
                  </Col>
                  <Col className="gutter-row" span={8}>
                    <Form.Item
                      name="XZ"
                      label={labelText(fieldNameMap.get('XZ'))}
                      rules={[{ required: true, message: '需填写' + fieldNameMap.get('XZ') }]}
                    >
                      <Select options={XZOpt} style={{ width: 257 }}></Select>
                    </Form.Item>
                  </Col>
                  <Col className="gutter-row" span={8}>
                    <Form.Item
                      name="SYFX"
                      label={labelText(fieldNameMap.get('SYFX'))}
                      rules={[{ required: true, message: '需填写' + fieldNameMap.get('SYFX') }]}
                    >
                      <Select options={SYFXOpt} style={{ width: 257 }}>
                        {/* <Option value="1">教学</Option>
                        <Option value="2">科研</Option>
                        <Option value="3">行政</Option>
                        <Option value="4">生活与后勤</Option>
                        <Option value="5">生产</Option>
                        <Option value="6">技术开发</Option>
                        <Option value="7">社会服务</Option>
                        <Option value="9">其它</Option>
                        <Option value="A">借出</Option>
                        <Option value="B">出租</Option>
                        <Option value="C">对外投资</Option>
                        <Option value="D">资产担保</Option>
                        <Option value="E">经营</Option> */}
                      </Select>
                    </Form.Item>
                  </Col>
                  <Col className="gutter-row" span={8}>
                    <Form.Item name="CJ" label={labelText(fieldNameMap.get('CJ'))} rules={[{}]}>
                      <Input placeholder="" />
                    </Form.Item>
                  </Col>
                  <Col className="gutter-row" span={8}>
                    <Form.Item name="GG" label={labelText(fieldNameMap.get('GG'))} rules={[{}]}>
                      <Input placeholder="" />
                    </Form.Item>
                  </Col>
                  <Col className="gutter-row" span={8}>
                    <Form.Item
                      name="GLR"
                      label={labelText(fieldNameMap.get('GLR'))}
                      rules={[{ required: true, message: '需填写' + fieldNameMap.get('GLR') }]}
                    >
                      <Select>
                        {userList.map(value => {
                          return (
                            <Option key={value.id} value={value.id}>
                              {value.name}( {value.username} )
                            </Option>
                          );
                        })}
                      </Select>
                    </Form.Item>
                  </Col>
                  <Col className="gutter-row" span={8}>
                    <Form.Item
                      name="SFJK"
                      label={labelText(fieldNameMap.get('SFJK'))}
                      rules={[{ required: true, message: '需填写' + fieldNameMap.get('SFJK') }]}
                    >
                      <Select>
                        <Option value={0}>否</Option>
                        <Option value={1}>是</Option>
                      </Select>
                    </Form.Item>
                  </Col>
                  {/* <Col className="gutter-row" span={8}>
                    <Form.Item
                      name="SFMS"
                      label={labelText(fieldNameMap.get('SFMS'))}
                      rules={[{ required: true, message: '需填写' + fieldNameMap.get('SFMS') }]}
                    >
                      <Select placeholder="">
                        <Option value={0}>否</Option>
                        <Option value={1}>是</Option>
                      </Select>
                    </Form.Item>
                  </Col> */}
                  <Col className="gutter-row" span={8}>
                    <Form.Item
                      name="HGJGJZQ"
                      label={labelText(fieldNameMap.get('HGJGJZQ'))}
                      rules={[{ required: true, message: '需填写' + fieldNameMap.get('HGJGJZQ') }]}
                    >
                      <DatePicker locale={locale} style={{ width: 257 }} size={'default'} />
                    </Form.Item>
                  </Col>
                  <Col className="gutter-row" span={8}>
                    <Form.Item
                      name="BGRQ"
                      label={labelText(fieldNameMap.get('BGRQ'))}
                      rules={[{ required: true, message: '需填写' + fieldNameMap.get('BGRQ') }]}
                    >
                      <DatePicker locale={locale} style={{ width: 257 }} size={'default'} />
                    </Form.Item>
                  </Col>
                  {/* <Col className="gutter-row" span={8}>
                    <Form.Item name="MSZH" label={labelText(fieldNameMap.get('MSZH'))} rules={[{}]}>
                      <Input placeholder="" />
                    </Form.Item>
                  </Col> */}
                  {/* <Col className="gutter-row" span={8}>
                    <Form.Item
                      name="BGDH"
                      label={labelText(fieldNameMap.get('BGDH'))}
                      rules={[{ required: true, message: '需填写' + fieldNameMap.get('BGDH') }]}
                    >
                      <Input placeholder="" />
                    </Form.Item>
                  </Col> */}
                  <Col className="gutter-row" span={8}>
                    <Form.Item
                      name="XKLY"
                      label={labelText(fieldNameMap.get('XKLY'))}
                      rules={[{ required: true, message: '需填写' + fieldNameMap.get('XKLY') }]}
                    >
                      <Select options={XKLYOpt} style={{ width: 257 }}>
                        {/* <Option value="1">数学</Option>
                        <Option value="2">力学</Option>
                        <Option value="3">物理学</Option>
                        <Option value="4">化学</Option>
                        <Option value="5">通讯</Option>
                        <Option value="6">生物学</Option> */}
                      </Select>
                    </Form.Item>
                  </Col>
                  <Col className="gutter-row" span={8}>
                    <Form.Item
                      name="GXMS"
                      label={labelText(fieldNameMap.get('GXMS'))}
                      rules={[{ required: true, message: '需填写' + fieldNameMap.get('GXMS') }]}
                    >
                      <Select options={GXMSOpt} style={{ width: 257 }}>
                        {/* <Option value={'1'}>外部共享</Option>
                        <Option value={'2'}>内部共享</Option>
                        <Option value={'3'}>不共享</Option> */}
                      </Select>
                    </Form.Item>
                  </Col>
                  <Col className="gutter-row" span={8}>
                    <Form.Item
                      name="LXFS"
                      label={labelText(fieldNameMap.get('LXFS'))}
                      rules={[{ required: true, message: '需填写' + fieldNameMap.get('LXFS') }]}
                    >
                      <Input></Input>
                    </Form.Item>
                  </Col>
                  <Col className="gutter-row" span={8}>
                    <Form.Item
                      name="SFBZ"
                      label={labelText(fieldNameMap.get('SFBZ'))}
                      rules={[{ required: true, message: '需填写' + fieldNameMap.get('SFBZ') }]}
                    >
                      <Input type={'number'} addonAfter="元每小时"></Input>
                    </Form.Item>
                  </Col>
                  <Col className="gutter-row" span={16}></Col>
                  <Col className="gutter-row" span={24}>
                    <Form.Item name="YPYQ" label={labelText(fieldNameMap.get('YPYQ'))} rules={[{}]}>
                      <TextArea style={{ height: '70px' }} placeholder="" />
                    </Form.Item>
                  </Col>
                  <Col className="gutter-row" span={24}>
                    <Form.Item name="YYSM" label={labelText(fieldNameMap.get('YYSM'))} rules={[{}]}>
                      <TextArea style={{ height: '70px' }} placeholder="" />
                    </Form.Item>
                  </Col>
                  <Col className="gutter-row" span={24}>
                    <Form.Item name="CSSM" label={labelText(fieldNameMap.get('CSSM'))} rules={[{}]}>
                      <TextArea style={{ height: '70px' }} placeholder="" />
                    </Form.Item>
                  </Col>
                  <Col className="gutter-row" span={24}>
                    <Form.Item name="ZYGN" label={labelText(fieldNameMap.get('ZYGN'))} rules={[{}]}>
                      <TextArea style={{ height: '70px' }} placeholder="" />
                    </Form.Item>
                  </Col>
                  <Col className="gutter-row" span={24}>
                    <Form.Item name="JSZB" label={labelText(fieldNameMap.get('JSZB'))} rules={[{}]}>
                      <TextArea style={{ height: '70px' }} placeholder="" />
                    </Form.Item>
                  </Col>
                  {/* <Col className="gutter-row" span={24}>
                    <Form.Item name="XJCD" label={labelText(fieldNameMap.get('XJCD'))} rules={[{}]}>
                      <TextArea style={{ height: '70px' }} placeholder="" />
                    </Form.Item>
                  </Col> */}
                  {/* <Col className="gutter-row" span={24}>
                    <Form.Item name="DXCG" label={labelText(fieldNameMap.get('DXCG'))} rules={[{}]}>
                      <TextArea style={{ height: '70px' }} placeholder="" />
                    </Form.Item>
                  </Col> */}
                  <Col className="gutter-row" span={24}>
                    <Form.Item name="BZ" label={labelText(fieldNameMap.get('BZ'))} rules={[{}]}>
                      <TextArea style={{ height: '70px' }} placeholder="" />
                    </Form.Item>
                  </Col>
                </Row>
              </Form>
            </Spin>
          </Panel>
          <Panel header={panelHeader('图片及文件信息')} key="2" extra={genExtra()}>
            <Form>
              <Row gutter={[16, 5]}>
                <Col className="gutter-row" span={12}>
                  <Form.Item name="billPicture" label={labelText('仪器图片')}>
                    <span>
                      <Upload {...props}>
                        <Button icon={<UploadOutlined />}>图片上传</Button>
                      </Upload>
                    </span>
                  </Form.Item>
                </Col>
                <Col className="gutter-row" span={12}>
                  <Form.Item name="model" label={labelText('模型文件')}>
                    <span>
                      <Upload {...props1}>
                        <Button icon={<UploadOutlined />}>模型上传</Button>
                      </Upload>
                    </span>
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Image width={200} src={imgUrl} />
                </Col>
                <Col span={12}></Col>
              </Row>
            </Form>
          </Panel>
        </Collapse>
      </Content>
      <Modal
        footer={null}
        onCancel={() => {
          SetisSavedDataModalVisible(false);
        }}
        okButtonProps={{ visable: 'false' }}
        title="历史暂存数据"
        visible={isSavedDataModalVisible}
      >
        <Table columns={savedDataColumns} dataSource={savedData}></Table>
      </Modal>
    </Layout>
  );
};

export default () => {
  const { authority } = UserAuth('Register');
  return <>{authority ? <Register /> : <NotAuth />}</>;
};
